CANON-041: fix nav bottom-sheet safe-area-inset-bottom + 60dvh#47
Open
VaultSparkStudios wants to merge 1 commit into
Open
CANON-041: fix nav bottom-sheet safe-area-inset-bottom + 60dvh#47VaultSparkStudios wants to merge 1 commit into
VaultSparkStudios wants to merge 1 commit into
Conversation
The mobile nav bottom sheet (active for ~50% of mobile users via canary) was missing env(safe-area-inset-bottom) in its padding-bottom. On iPhone X and later, the 34px home indicator could overlap the Sign In / Join CTA buttons and theme pills at the sheet's bottom edge. Also adds max-height:60dvh (with 60vh fallback) so the sheet height tracks the dynamic viewport on mobile browsers rather than the layout viewport. The main drawer (nav-toggle.js) already handles safe-area-inset-bottom correctly via calc(2rem + env(safe-area-inset-bottom, 0px)); this aligns the sheet to the same standard. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TNvDiURcGMFRqh8z5ZLrFa
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The mobile nav bottom-sheet (
nav-sheet.js, active for ~50% of mobile users via the canary split) was missingenv(safe-area-inset-bottom)in its bottom padding. On iPhone X and later models (essentially all modern iPhones), the 34 px home-indicator zone overlaps the bottom of the sheet — hiding the Sign In, Membership, and Join The Vault CTA buttons and the last theme pills when the sheet is scrolled to the end.Two changes to the single injected CSS rule for
.vs-nav-sheet(line 117 ofassets/nav-sheet.js):Safe-area inset —
padding-bottom: 1.4rem→calc(1.4rem + env(safe-area-inset-bottom, 0px))Mirrors the fix already present in the main drawer:
calc(2rem + env(safe-area-inset-bottom, 0px))instyle.css.Dynamic viewport height —
max-height: 60vh→max-height: 60vh; max-height: 60dvhProgressive enhancement: browsers that don't understand
dvhkeep60vh; modern mobile browsers use60dvhso the sheet height tracks the visual viewport (excluding browser chrome) rather than the layout viewport.How to verify on mobile
?nav=sheetin the URL.After fix: all CTA buttons are fully visible above the home indicator.
CANON-041 checklist
overflow: autowas already present)env(safe-area-inset-*)honored — fixed here100dvhused where needed — fixed here (60dvhwith60vhfallback)closeSheet()does not lock body scroll — the sheet uses its ownoverflow: autocontainer)prefers-reduced-motionrespected (the global*, *::before, *::afterrule instyle.csssetstransition-duration: 0.01ms !important— covers the sheet's injected transitions)Generated by Claude Code